<!-- 主页 -->
<template>
  <div>
    <div style="z-index:10;position: relative;">
      <el-container style="height:100%;">
        <el-aside width="auto" v-show="config.isVertical">
          <AsideMenu v-if="config.isXs"></AsideMenu>
        </el-aside>
        <DrawerMenu v-if="!config.isXs"></DrawerMenu>
        <el-container>
          <el-main class="_main">
            <el-collapse-transition>
              <div class="_header" v-show="isHeader">
                <Menu></Menu>
              </div>
            </el-collapse-transition>

            <!-- <keep-alive :include="['books']"> -->
            <div class="_main-content" id="_main-content">
              <transition name="fade" enter-active-class="animated fadeIn">
                <router-view ></router-view>
              </transition>
            </div>
            <!-- </keep-alive> -->

            <el-backtop target="._main-content"></el-backtop>
          </el-main>
        </el-container>
      </el-container>
    </div>
    <toolBall></toolBall>
  </div>
</template>

<script>
// import Menu from "./root-main-menu.vue";
const Menu = () => import("./root-main-menu.vue");
const AsideMenu = () => import("./root-aside-menu.vue");
const DrawerMenu = () => import("./root-drawer-menu.vue");
const toolBall = () => import("../demo/toolBall.vue");
export default {
  components: {
    Menu,
    AsideMenu,
    DrawerMenu,
    toolBall
  },
  data() {
    return {
      isHeader: true,
      lastHeight: 0,
      fullWidth: document.documentElement.clientWidth
    };
  },
  watch: {
    // 滚动监听事件
    "$store.state.config.isHeaderHide": function(val) {
      if (val) {
        window.addEventListener("scroll", this.handleScroll, true); // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
      } else {
        window.removeEventListener("scroll", this.handleScroll, true); // 移除滚动监听
        this.isHeader = true;
      }
    },
    // 屏幕宽度监控
    fullWidth(val) {
      if (!this.timer) {
        this.fullWidth = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          that.timer = false;
          that.handleWidth();
        }, 100);
      }
    }
  },
  computed: {
    config: function() {
      return this.$store.state.config;
    }
  },
  mounted() {
    const that = this;
    // 滚动监听事件
    if (this.$store.state.config.isHeaderHide) {
      window.addEventListener("scroll", that.handleScroll, true); // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
    }
    // 屏幕宽度监控
    window.onresize = () => {
      return (() => {
        window.fullWidth = document.documentElement.clientWidth;
        that.fullWidth = window.fullWidth;
      })();
    };
    that.handleWidth();
  },

  methods: {
    //滚动条监控
    handleScroll() {
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // 设备/屏幕高度
      let scrollObj = document.getElementById("_main-content"); // 滚动区域
      let scrollTop = scrollObj.scrollTop; // div 到头部的距离
      let scrollHeight = scrollObj.scrollHeight; // 滚动条的总高度
      //滚动条到底部的条件
      if (scrollTop + clientHeight == scrollHeight) {
        // div 到头部的距离 + 屏幕高度 = 可滚动的总高度
      }
      if (!this.timerScroll) {
        this.timerScroll = true;
        let that = this;
        setTimeout(function() {
          that.timerScroll = false;
          if (scrollTop > this.lastHeight) {
            that.isHeader = false;
          } else {
            that.isHeader = true;
          }
          this.lastHeight = scrollTop;
        }, 100);
      }
    },
    //屏幕小于某值时,禁止使用横屏菜单
    handleWidth() {
      let that = this;
      if (that.fullWidth < 1440) {
        that.$store.state.config.isXs = false;
        that.$store.state.config.isCollapse = true;
        that.$store.state.config.isVertical = true;
      } else {
        that.$store.state.config.isXs = true;
      }
    }
  }
};
</script>
<style scoped>
._header {
  padding: 0;
  border-bottom: solid 1px #e6e6e6;
  overflow-y: hidden;
  overflow-x: auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 999;
  position: absolute;
  width: 100%;
  background-color: #ffffff;
}

._main {
  padding: 0px;
  overflow: hidden;
  position: relative;
}
._main-content {
  padding-top: 50px;
  overflow: auto;
  height: 100%;
}
.el-aside::-webkit-scrollbar {
  width: 0 !important;
}
.el-aside {
  -ms-overflow-style: none;
}
.el-aside {
  overflow: -moz-scrollbars-none;
}
</style>
